<template>
  <div class="index-img">
    <el-row :gutter="10">
      <el-col :xl="6" :lg="6" :md="12" :sm="24" class="mb10">
        <el-card shadow="always" v-loading="loading">
          <div class="w-head">微信推广链接</div>
          <div class="w-tip">注意：生成的推广链接有效期只有30天</div>
          <el-divider></el-divider>
          <div class="w-desc">链接：{{ wxLink }}</div>
          <div class="w-footer">
            <el-button type="primary" @click="handlePostMyUrlLinkInfo">生成链接</el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts" name="pomotionLink">
import type { IUserLink } from "@/types/user";
import { postMyUrlLinkInfo } from "@/utils/api/master";

const loading = ref(false);
const wxLink = ref("");

/* 获取推广链接 */
function handlePostMyUrlLinkInfo() {
  loading.value = true;
  postMyUrlLinkInfo<IUserLink, unknown>({})
    .then(res => {
      console.log(res);
      wxLink.value = res.result.url_link;
      ElMessage.success("生成成功");
    })
    .catch(() => {})
    .finally(() => {
      loading.value = false;
    });
}
</script>
<style scoped>
.index-img {
  width: 100%;
}

.w-head {
  font-size: 16px;
}
.w-tip {
  margin-top: 5px;
  font-size: 13px;
}

.w-footer {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
</style>
